<!-- MAIN CONTENT -->
<div id="content">

    <div class="row">
        <big-breadcrumbs items="['Charts', 'Dygraphs']"
                         class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        <div smart-include="app/layout/partials/sub-header.tpl.html"></div>
    </div>
    <!-- widget grid -->
    <section id="widget-grid" widget-grid>


        <div class="row">

            <article class="col-sm-12 col-md-12 col-lg-12">

                <div class="alert alert-info">

                    <div class="row">

                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
                            <h3 class="no-margin">Dygraphs is a fast, flexible open source JavaScript charting
                                library.</h3>


                            <h5>Features</h5>
                            <ul>
                                <li>Handles <strong>huge data sets</strong>: dygraphs plots millions of points without
                                    getting bogged down.
                                </li>
                                <li><strong>Interactive out of the box</strong>: zoom, pan and mouseover are on by
                                    default.
                                </li>
                                <li>Strong support for <strong>error bars</strong> / confidence intervals.
                                </li>
                                <li><strong>Highly customizable</strong>: using options and custom callbacks, you can
                                    make dygraphs do almost anything.
                                </li>
                                <li>dygraphs is <strong>highly compatible</strong>: it works in all major browsers
                                    (including IE8). You can even <strong>pinch to zoom</strong> on mobile/tablet
                                    devices!
                                </li>
                                <li>There's an <strong>active community</strong> developing and supporting dygraphs.
                                </li>
                            </ul>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
                            <h4>JavaScript Example</h4>
						<pre class="prettyprint margin-top-10">new Dygraph(div, "ny-vs-sf.txt", {
  legend: 'always',
  title: 'NYC vs. SF',
  showRoller: true,
  rollPeriod: 14,
  customBars: true,
  ylabel: 'Temperature (F)',
});</pre>
                        </div>

                    </div>


                </div>

                <div jarvis-widget id="dygraphs-chart-1" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                        <h2>No roll period</h2>
                    </header>
                    <div>
                        <div class="widget-body">
                            <div dygraphs-no-roll-period style="width: 100%;height: 300px;"></div>
                        </div>
                    </div>
                </div>

                <div jarvis-widget id="dygraphs-chart-2" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                        <h2>No roll (timestamp)</h2>
                    </header>
                    <div>
                        <div class="widget-body">
                            <p class="alert alert-success">Roll period of 14 timesteps, custom range selector height and plot color.</p>
                            <!-- this is what the user will see -->
                            <div dygraphs-no-roll-timestamp style="width: 100%;height: 300px;"></div>

                        </div>
                    </div>
                </div>
            </article>
        </div>
    </section>
</div>